

var user = {};
var socket = null;
var messages = {}
var target; //当前聊天用户id 
var userList = [];




// 点击登陆按钮
document.querySelector('#login').onclick = function () {

  // 保存数据
  user.ip =  $('#ip').val();
  user.port =  $('#port').val(); 
  nick = $('#nick').val();
  imgId = $('.avators .active').index() + 1;
  // console.log(imgId);

  //设置个人信息
  $('.nick').html(nick);
  $('.user-img').attr('src', `./img/${imgId}.jpg`);

  // 隐藏登陆也
  document.querySelector('.win-box').classList.add('hide');

  //设置当前用户和修改昵称, 创建聊天数组， 渲染当前用户的聊天信息，重置提示
  $('.people').on('click', '.person', function () {
    $(this).addClass('active').siblings().removeClass('active');
    $('.top  .name').text($(this).find('.name').text());
    if (!messages[$(this).data('id')]) {
      messages[$(this).data('id')] = []; // 创建当前用聊天的容器
    }  
    target = $(this).data('id');  // 记录当前聊天用户的id  
    renderMsg();
    // 消息提示重置
    $(this).find('.tip').hide().data('num', 0);
  })

  

  // alert(`${user.ip}:${user.port}`);
  // 连接服务器 
  socket = io(`${user.ip}:${user.port}`, {
    query: {
      nick,
      imgId
    }
  });

 
  // socket = io();
  //监听 返回全部数据
  socket.on('user-list', function (data) {
    console.log(data);   
    userList = data;
    $('.people').html(template('tmp-list', { list: data }));
  });


  //发生按钮 点击逻辑， 我发生信息给其他人
  $('.send').click(function () {
    var txt = $('#input').val();   
    
    if (txt.length < 1) {
      alert('不能为空');
      return;
    }

    socket.emit('p2p-in', {
      from: socket.id,
      to: target,
      txt: txt
    });


    messages[target].push({
      state: 0, 
      txt: txt,
      data: Date.now()
    })

    //渲染
    renderMsg();

  });

  //服务器推送其他人的聊天消息给我 
  socket.on('p2p-out', function (data) {
    // alert(data.txt);
    if (!messages[data.from]) { messages[data.from] = []; }
    messages[data.from].push({
      state: 1,
      txt: data.txt,
      date: Date.now()
    })
    var li = $(`[data-id=${data.from}]`);
    //渲染
    if (target == data.from) {
      renderMsg();
    } else {
      li.find('.tip').show().text($('.tip').data('num') + 1);
      $('.tip').data('num', $('.tip').data('num') + 1);     
    }

  
    // 设置提示 
    li.find('.preview').text(data.txt);
    li.find('.time').text('3:20');   

  })



  


  //渲染聊天内容
  function renderMsg() {
    if (!target) return;
    var data = {
      list: messages[target],
      imgId: userList.find(v => v.socketId == target).imgId     
    }
    //渲染当前选中 的用户
    console.log('data-->', data);    
    $('.items').html(template('tmp-msg', data));
  }





}




// 头像选中
$('.avators img').click(function () {
  $(this).addClass('active').siblings().removeClass('active');
})







// div.scrollTop = div.scrollHeight; 滚动到底部